import React, {Component} from 'react';
//import 'isomorphic-fetch';//fetch需要用node安装，没有的可以去下载一下
//import {Button} from 'react-bootstrap';//同上
import {Button} from 'antd';
import axios from 'axios';
export default class AuthorList extends Component {
    constructor() {
        super();
        this.state = {}
    }
    async componentDidMount() {
        //let authors = await (await fetch(`http://localhost:8080/author/findAll`)).json();//主要是从后台拿json数据
        //let authors = axios.get('http://localhost:8080/author/findAll').json();
        //this.setState({authors});
        const _this=this;    //先存一下this，以防使用箭头函数this会指向我们不希望它所指向的对象。
        axios.get('http://localhost:8080/author/findAll')
            .then(function (response) {
                _this.setState({
                    authors:response.data,
                    isLoaded:true
                });
            })
            .catch(function (error) {
                console.log(error);
                _this.setState({
                    isLoaded:false,
                    error:error
                })
            })
    }
    render() {
        let {authors = []} = this.state;

        return (
            <div>
                <table className='table'>
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>大学</th>
                        <th>邮箱</th>
                        <th>密码</th>
                        <th>编辑</th>
                    </tr>
                    </thead>
                    <tbody>
                    {authors.map(({id, name, gender, university, email,password}) =>
                        <tr key={id}>
                            <td>{id}</td>
                            <td>{name}</td>
                            <td>{gender}</td>
                            <td>{university}</td>
                            <td>{email}</td>
                            <td>{password}</td>
                            <td><Button onClick = {() => {
                                this.setState({authors});
                            }}>配置</Button></td>
                        </tr>
                    )}
                    </tbody>
                </table>
            </div>
        );
    }
}